<template>
  <el-cascader ref="cascaderRef" v-bind="$attrs" :props="props"> </el-cascader>
</template>

<script setup lang="ts" name="areaSelect">
import { ref } from 'vue';
import { getAreas } from '/@/api/area';
import { CascaderInstance, CascaderProps } from 'element-plus';

const cascaderRef = ref<CascaderInstance>();
const getCheckedNodes = () => cascaderRef.value?.getCheckedNodes(true);

const getLables = () => {
  const nodes = cascaderRef.value?.getCheckedNodes(true);
  if (nodes[0]) {
    return nodes[0].pathLabels;
  }

  return [];
};

const props: CascaderProps = {
  lazy: true,
  lazyLoad(node, resolve) {
    const { level } = node;
    getAreas({ parent_id: node.data?.value }).then(({ data }) => {
      const nodes = (data || []).map((item: any) => {
        return {
          value: item.area_id,
          label: item.name,
          leaf: level >= 2,
        };
      });
      resolve(nodes);
    });
  },
};

defineExpose({
  getCheckedNodes,
  getLables,
});
</script>
../../api/document